import { PlusOutlined } from "@ant-design/icons";
import Title from "../../components/Title/Title";
import "./inex.less";
import React, { useEffect, useState } from "react";
import { getshopinfo } from "../../api/store";
import StoreAvater from "../../components/UpAvater/UpAvater";

import {
  Button,
  Cascader,
  Checkbox,
  ColorPicker,
  Form,
  Input,
  InputNumber,
  Radio,
  Select,
  Slider,
  Switch,
  TreeSelect,
  Upload,
  Divider,
} from "antd";
import { DatePicker, Space } from "antd";
import dayjs from "dayjs";
const { RangePicker } = DatePicker;

// 时期选择
const onChange1 = (date) => {
  if (date) {
    console.log("Date: ", date);
  } else {
    console.log("Clear");
  }
};
const onRangeChange = (dates, dateStrings) => {
  if (dates) {
    console.log("From: ", dates[0], ", to: ", dates[1]);
    console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
  } else {
    console.log("Clear");
  }
};
const rangePresets = [
  {
    label: "Last 7 Days",
    value: [dayjs().add(-7, "d"), dayjs()],
  },
  {
    label: "Last 14 Days",
    value: [dayjs().add(-14, "d"), dayjs()],
  },
  {
    label: "Last 30 Days",
    value: [dayjs().add(-30, "d"), dayjs()],
  },
  {
    label: "Last 90 Days",
    value: [dayjs().add(-90, "d"), dayjs()],
  },
];

//数字输入框
const onChange = (value) => {
  console.log("changed", value);
};
//多选框
const CheckboxGroup = Checkbox.Group;
const plainOptions = [
  "活动支持",
  "单人精彩套餐",
  "VC无限橙果汁全场8折",
  "在线支付满28减5",
  "特价饮品8折抢购",
  "五一特惠",
  "国庆特价",
  "春节一折折扣",
];
const defaultCheckedList = ["活动支持", "单人精彩套餐"];
const { Option } = Select;

const { TextArea } = Input;
const normFile = (e) => {
  if (Array.isArray(e)) {
    return e;
  }
  return e?.fileList;
};
const selectBefore = (
  <Select
    defaultValue="add"
    style={{
      width: 160,
    }}
  >
    <Option value="add">+</Option>
    <Option value="minus">-</Option>
  </Select>
);
const selectAfter = (
  <Select
    defaultValue="USD"
    style={{
      width: 60,
    }}
  >
    <Option value="USD">$</Option>
    <Option value="EUR">€</Option>
    <Option value="GBP">£</Option>
    <Option value="CNY">¥</Option>
  </Select>
);

export default function Store() {
  // 日期
  const dateFormat = "YYYY-MM-DD HH:mm:ss";
  // 多选框
  const [checkedList, setCheckedList] = useState(defaultCheckedList);
  const checkAll = plainOptions.length === checkedList.length;
  const indeterminate =
    checkedList.length > 0 && checkedList.length < plainOptions.length;
  const onChange = (list) => {
    setCheckedList(list);
  };
  const onCheckAllChange = (e) => {
    setCheckedList(e.target.checked ? plainOptions : []);
  };


  const onRangeChange = (dates) => {
    if (dates && dates.length === 2) {
      setData({ ...data, date: [dates[0].format(dateFormat), dates[1].format(dateFormat)] });
    }
  };


  const [data, setData] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await getshopinfo();
        setData(res.data.data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };
    fetchData();
  }, []);
  console.log(data);


  return (
    <>
      {/* className="addbtn1" */}
      <Title title="店铺管理">
        <Button
          type="primary"
          slot="do"
          onClick={() => {
            handleEditSubmit;
          }}
        >
          保存店铺信息
        </Button>
      </Title>
      <div className="sort">
        <Form
          className="form"
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 14,
          }}
          layout="horizontal"
          // disabled={componentDisabled}
          style={{
            maxWidth: 900,
          }}
        >
          <Form.Item label="店铺名称">
            <Input
              value={data.name || ""}
              onChange={(e) => setData({ ...data, name: e.target.value })}
            />
          </Form.Item>

          <Form.Item label="店铺公告">
            {/* <TextArea rows={2} value={data.bulletin} /> */}
            <TextArea
              rows={2}
              value={data.bulletin || ""}
              onChange={(e) => setData({ ...data, bulletin: e.target.value })}
            />
          </Form.Item>

          <Form.Item
            label="店铺头像"
            valuePropName="fileList"
            getValueFromEvent={normFile}
          >
            {/* <StoreAvater></StoreAvater> */}
            <img src={"http://8.137.157.16:9002" + data.avatar} alt="" />

            <Upload
              // action="http://8.137.157.16:9002/shop/upload"
              listType="picture-card"
            >
              <button
                style={{
                  border: 0,
                  background: "none",
                }}
                type="button"
              >
                <PlusOutlined />
                <div
                  style={{
                    marginTop: 8,
                  }}
                ></div>
              </button>
            </Upload>
          </Form.Item>
          <Form.Item
            label="店铺图片"
            valuePropName="fileList"
            getValueFromEvent={normFile}
          >
            
            {Array.isArray(data.pics)&&data &&
              data.pics &&
              data.pics.map((item) => (
                <img
                  src={"http://8.137.157.16:9002" + item}
                  alt=""
                  key={item}
                />
              ))}

            <Upload
              // action="http://8.137.157.16:9002/shop/upload"
              listType="picture-card"
            >
              <button
                style={{
                  border: 0,
                  background: "none",
                }}
                type="button"
              >
                <PlusOutlined />
                <div
                  style={{
                    marginTop: 8,
                  }}
                >
                  Upload
                </div>
              </button>
            </Upload>
          </Form.Item>

          <Form.Item label="起送价格">
            <Input
              value={data.deliveryPrice || ""}
              onChange={(e) =>
                setData({ ...data, deliveryPrice: e.target.value })
              }
            />
            {/* <Input value={data.deliveryPrice} /> */}
          </Form.Item>

          <Form.Item label="送达时间">
            <Input
              value={data.deliveryTime || ""}
              onChange={(e) =>
                setData({ ...data, deliveryTime: e.target.value })
              }
            />
            {/* <Input value={data.deliveryTime} /> */}
          </Form.Item>
          <Form.Item label="配送描述">
            <Input
              value={data.description || ""}
              onChange={(e) =>
                setData({ ...data, description: e.target.value })
              }
            />
            {/* <Input value={data.description} /> */}
          </Form.Item>

          <Form.Item label="店铺好评率">
            {/* <InputNumber
                                min={0}
                                max={10}
                                defaultValue={3}
                                onChange={onChange}
                            /> */}
            {/* <Input value={data.score} /> */}
            <Input
              value={data.score || ""}
              onChange={(e) => setData({ ...data, score: e.target.value })}
            />
          </Form.Item>

          <Form.Item label="店铺销量">
            {/* <InputNumber
                                min={0}
                                max={1000000}
                                defaultValue={12}
                                onChange={onChange}
                            /> */}
            <Input
              value={data.sellCount || ""}
              onChange={(e) => setData({ ...data, sellCount: e.target.value })}
            />
            {/* <Input value={data.sellCount} /> */}
          </Form.Item>

          <Form.Item label="活动支持">
            <CheckboxGroup
              options={plainOptions}
              value={checkedList}
              onChange={onChange}
              className="checkbox-group-inline"
            />
          </Form.Item>

          <Form.Item label="营业时间">
            {data.date && data.date.length >= 2 && (
              <div>
                <RangePicker
                  defaultValue={[
                    dayjs(data.date[0], dateFormat),
                    dayjs(data.date[1], dateFormat),
                  ]}
                  format={dateFormat}
                  presets={[
                    {
                      label: (
                        <span aria-label="Current Time to End of Day">
                          Now ~ EOD
                        </span>
                      ),
                      value: () => [dayjs(), dayjs().endOf("day")],
                    },
                    ...rangePresets,
                  ]}
                  showTime
                  onChange={onRangeChange}
                />
              </div>
            )}
          </Form.Item>
        </Form>
      </div>
    </>
  );
}
